<template>
	<view style="width: 100vw;height: 100vh;background-color: #edf5f7;">
		<!-- <view>
			<image style="width: 80rpx;height:80rpx;margin-left: 50rpx;position: relative;top:95rpx;"
				class="shrink-0 image_3"
				src="https://ide.code.fun/api/image?token=658020ebfcfbac001139fd4f&name=3b8f508d119d287a8dfc01e289624070.png" />
		</view> -->
		<!-- <view class="div2">
			<view class="div2-2"
				style="display: flex; align-items: center; justify-content: center;color: #636363;margin-top: 15rpx;"
				@click="goSearch()">
				<view style="float: left;"><img style="width: 40rpx;height: 40rpx;margin-left: -90rpx;"
						src="../../static/哑铃.png" alt=""></view>
				<view style="float: left; margin-left: 10rpx;letter-spacing: 2px;font-size: 28rpx;">
					<text style="font-weight: bold;">追云健身俱乐部</text>
				</view>
			</view>
		</view> -->
		<view style="height: 13%;">
			<view class="box2">
				<!-- 返回 -->
				<view class="box2-1">
					<u-icon name="close" size="38rpx" color="black" @click="fanhui()"></u-icon>
				</view>
				<!-- 搜索 -->
				<view class="box2-2" style="display: flex; align-items: center;color: #636363;" @click="goSearch()">
					<u--input
						placeholder="输入动作名称搜索"
						prefixIcon="search"
						prefixIconStyle="font-size: 22px;color: #909399"
						shape="circle"
						border="none"
						fontSize="27rpx"
					></u--input>
				</view>
				<view style="width: 100%;height: 80vh;">
					<!-- 部位 -->
					<view class="buwei">
						<view class="buwei1">
							{{ item1.fitnessPlanName }}
						</view>
						<view class="buwei2">
							<view v-for="(item, index) in buweilist" :key="index" style="margin-right: 10rpx;font-size: 28rpx;">
							  <text :style="{ fontWeight: currentIndex === index ? 'bold' : 'normal',color: currentIndex === index ? '#000000' : '#7f7f7f' }" @tap="buweiclick(index)">{{ item.fitnessTypeName }}</text>
							</view>
						</view>
					</view>
					<!-- 动作 -->
					<view class="dongzuo">
					  <view class="dz1">
					    <view v-for="(item, index) in dzlist" :key="item.id" 
						class="box" 
						:style="{ backgroundColor: selectedIndexes[currentBuweiIndex] && selectedIndexes[currentBuweiIndex].includes(item.id) ? '#6ee7f0' : '#fff' }" @tap="boxClick(item, index)">
					          <text>{{ item.fitnessActionName }}</text>
					    </view>
					  </view>
					</view>
					<!-- 底部两个按钮 -->
					<view style="width: 100%;height: 90rpx;font-size: 30rpx;">
						<view class="dzbottom dzbottom-temp" :class="{ 'active': selectedIndexes[currentBuweiIndex] && selectedIndexes[currentBuweiIndex].length > 0 }">
					      <text>临时组</text>
					      <text v-if="selectedIndexes && selectedIndexes[currentBuweiIndex] && selectedIndexes[currentBuweiIndex].length > 0">({{ selectedIndexes[currentBuweiIndex].length }})</text>
					    </view>
					    <view style="float: left; border-left: 1px solid grey; height: 70rpx; margin-top: 10rpx;"></view>
					    <view class="dzbottom dzbottom-sure" :class="{ 'active': selectedIndexes[currentBuweiIndex] && selectedIndexes[currentBuweiIndex].length > 0 }" @tap="insertPlanAction()">
					      <text>确定</text>
					      <text v-if="selectedIndexes && selectedIndexes[currentBuweiIndex] && selectedIndexes[currentBuweiIndex].length > 0">({{ selectedIndexes[currentBuweiIndex].length }})</text>
					    </view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item1:null,
				item:{
					fitnessActionId:''
				},
				// 初始化为-1，表示没有任何分类被点击
				currentIndex: -1,  
				// 取消选中时将 selectedActionIndex 设置为 -1
				selectedActionIndex: -1,
				// 部位的索引
				currentBuweiIndex:-1,
				// 存储被选中的项的id
				selectedIndexes: [],
				// 选中数量
				selectedLength: {},
				// 总共选中数量
				selectedCount: 0, 
				//部位模拟列表
				buweilist:[],
				//动作模拟列表
				dzlist:[],
				inserts:{
					group:[]
				}
			}
		},
		onLoad(option) {
			//分类点击默认值
			this.currentIndex = 0;
			this.item1 = JSON.parse(option.item);
			console.log("name "+this.item1.fitnessPlanName)
			console.log("item "+JSON.stringify(this.item1));
			// this.fitnesspurpose(this.item1.venueUniqueIdentifier);
			this.list(this.item1.fitnessPurposeId);
			// this.getPlan(this.item1.id);
		},

		methods: {
			// 查询标签id根据目的id
			// fitnesspurpose(venueUniqueIdentifier){
			// 	var ths=this
			// 	uni.request({
			// 		url: this.URL+'plan/getFitnessPurpose',
			// 		method: 'GET',
			// 		data:{
			// 			venueUniqueIdentifier:venueUniqueIdentifier,
			// 		},
			// 		success: function(res) {
			// 			console.log("res "+(JSON.stringify(res)))
			// 			if(res.data.code===200){
			// 				// ths.buweilist = res.data.data.content
			// 				// console.log(res.data.data.content)
			// 			}
			// 		},
			// 		fail: function(error) {
			// 			// 处理请求失败
			// 			console.error('查询失败,请检查网络');
			// 		}
			// 	})
			// },
			
			//查计划（planactionid）
			// getPlan(id){
			// 	var ths = this;
			// 	uni.request({
			// 		url: this.URL+'plan/getFitnessPlanAction',
			// 		method: 'GET',
			// 		data: {
			// 			fitnessPlanId: id,
			// 		},
			// 		// userInfo:res.
			// 		success: function(res) {
			// 			console.log(res.data.data.content)
			// 			 const planActionIds = res.data.data.content.map((item) => item.id);
			// 			  console.log(planActionIds);
			// 			  // 调用下面方法并传递actionIds
			// 			  ths.getActionCount(planActionIds);
			// 			// this.jihuaid = res.data.data.content.id
			// 		},
			// 		fail: function(error) {
			// 			// 处理请求失败
			// 			console.error('角色查询失败,请检查网络');
			// 		}
			// 	})
			// },
			
			//查询组
			// getActionCount(planActionIds) {
			// 	var ths = this;
			// 	uni.request({
			// 		url: this.URL+'plan/getFitnessPlanActionGroupss',
			// 		method: 'get',
			// 		data:{
			// 			planActionId:planActionIds,
			// 		},
			// 		success: function(res) {
			// 			console.log("res "+res);
			// 			ths.inserts.group=res.data.data;
			// 		},
			// 		fail: function(error) {
			// 			// 处理请求失败
			// 			console.error('查询失败,请检查网络');
			// 		}
			// 	})
			// },
			// 查询标签id根据目的id
			list(fitnessPurposeId){
				var ths=this
				uni.request({
					url: this.URL+'plan/getFitnessTypes',
					method: 'GET',
					data:{
						fitnessPurposeId:fitnessPurposeId,
					},
					success: function(res) {
						if(res.data.code===200){
							ths.buweilist = res.data.data.content
							ths.currentIndex = 0; // 设置 currentIndex 的值为 0，表示默认选中第一列
							// console.log(res.data.data.content)
						}
					},
					fail: function(error) {
						// 处理请求失败
						console.error('查询失败,请检查网络');
					}
				})
			},
			//查询某部位下的动作
			dongzuolist(fitnessPurposeId,fitnessTypeId){
				var ths=this
				uni.request({
					url: this.URL+'plan/queryByType',
					method: 'GET',
					data:{
						venueUniqueIdentifier:uni.getStorageSync('teacherinfo').venueUniqueIdentifier,
						fitnessTypeId:fitnessTypeId,
						fitnessPurposeId:fitnessPurposeId,
					},
					success: function(res) {
						if(res.data.code===200){
							ths.dzlist = [];  // 创建一个空数组
							res.data.data.data.forEach(obj => {
							  // 创建一个新对象
							  const newObj = {};
							  // 遍历当前对象的所有属性，并将它们赋值给新对象对应的属性
							  Object.entries(obj).forEach(([key, value]) => {
							    newObj[key] = value;
							  });
							  // 将新对象 push 到 dzlist 数组中
							  ths.dzlist.push(newObj);
							});
							
							// 打印 dzlist 数组
							console.log(ths.dzlist);
							// ths.dzlist = res.data.data.data;
							// ths.dzlist = JSON.parse(JSON.stringify(res.data.data.data));
							// console.log("111111111111111111 "+res.data.data.data)
						}
					},
					fail: function(error) {
						// 处理请求失败
						console.error('查询失败,请检查网络');
					}
				})
			},
			// 点击部位
			buweiclick(index){
				// 动作
				this.dongzuolist(this.item1.fitnessPurposeId);
				// 清空所有选中的动作数组
				this.selectedIndexes = this.buweilist.map(() => []);
				this.currentIndex = index; // 点击时更新currentIndex的值
				const selectedBuwei = this.buweilist[index];
				const fitnessTypeId = selectedBuwei.id;
				console.log("点击的id为 "+fitnessTypeId); // 输出点击部位对应的id
				this.dongzuolist(this.item1.fitnessPurposeId, fitnessTypeId);
			},
			// 根据当前部位和动作的索引返回背景颜色
			  getBackgroundColor(item, index) {
			    const selectedIndexes = this.selectedIndexes[this.currentBuweiIndex];
			    return selectedIndexes && selectedIndexes.includes(index) ? '#6ee7f0' : '#fff';
			  },
			// 点击动作
			boxClick(item,index) {
				 if (this.selectedIndexes[this.currentBuweiIndex] === undefined) {
				    this.$set(this.selectedIndexes, this.currentBuweiIndex, []);
				  }
				  const selectedIndexes = this.selectedIndexes[this.currentBuweiIndex];
				  const itemId = item.id;
				  if (selectedIndexes.includes(itemId)) {
					// 取消选中
					selectedIndexes.splice(selectedIndexes.indexOf(itemId), 1);
					this.itemId1 = null; // 取消选中时清空itemId1的值
				  }else{
					// 清除当前部位的所有选中动作
				    selectedIndexes.splice(0, selectedIndexes.length);
				    // 选中当前点击的动作
				    selectedIndexes.push(itemId);
				    console.log("点击的id为 " + itemId);
				    this.itemId1 = itemId; // 保存itemId
				  }
				  // 更新选中数量
				  this.$set(this.selectedLength, index, selectedIndexes.length);
				  this.selectedCount = selectedIndexes.length;
			},
			// 点击确定
			insertPlanAction(){
				 if (this.itemId1) {
					// 进行其他操作
					this.inserts.fitnessPlanId=this.item1.id
					this.inserts.fitnessActionId=this.itemId1
					this.inserts.venueUniqueIdentifier=uni.getStorageSync('teacherinfo').venueUniqueIdentifier
					console.log(this.inserts)
					var ths=this
					uni.request({
						url: this.URL+'plan/addFitnessPlanAction',
						method: 'post',
						data:ths.inserts,
						success: function(res) {
							console.log(res);
							if (res.data.data.code == 200) {
								// 添加消息提示
								uni.showToast({
									title: '操作成功',
									icon: 'success',
									duration: 2000
								});
								uni.navigateBack({
									delta: 1 // 返回的页面数，这里是返回上一页，所以是1
								});
							}else{
								uni.showToast({
									title: '操作失败',
									icon: 'error',	
									duration: 2000
								});
							}
							
						},
						fail: function(error) {
							// 处理请求失败
							console.error('查询失败,请检查网络');
						}
					})
					
				} else {
				  console.log("没有选中任何动作");
				}
			},
			// 搜索
			goSearch(){
				
			},
			// 左上角返回按钮
			fanhui(){
				uni.navigateBack({
					delta: 1 // 返回的页面数，这里是返回上一页，所以是1
				});
			}
		},
	}
</script>

<style>
	.div2 {
		width: 100%;
		height: 5vh;
	}

	.div2-2 {
		background-color: #fff;
		border-radius: 20px 20px;
		height: 70rpx;
		width: 60%;
		margin: 0 auto;
	}
	.box2 {
		width: 100%;
		height: 5vh;
		margin-bottom: 50rpx;
	}

	.box2-1{
		width: 100rpx;
		height: 50rpx;
		margin-left: 20rpx;
		float: left;
	}
	.box2-2 {
		background-color: #fff;
		border-radius: 20px 20px;
		height: 50rpx;
		width: 55%;
		float: left;
		margin-left: 50rpx;
		margin-bottom: 40rpx;
	}
	.buwei{
		width:100%;
		height: 50rpx;
		display: flex;
		margin-bottom: 40rpx;
		margin-left: 25rpx;
		margin-top: 50rpx;
	}
	.buwei1{
		font-weight: bold;
		float: left;
		font-size: 40rpx;
		margin-right: 20rpx;
	}
	.buwei2{
		float: left;
		display: flex;
		align-items: center;
		margin-top: 10rpx;
	}
	.dongzuo{
		width: 100%;
		height: 100%;
		display: flex;
	}
	.dz1{
		width: 98%;
		height: 90%;
		margin: 0 auto;
		float: left;
	}
	.box{
		width: 200rpx;
		height: 100rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 30rpx;
		font-size: 26rpx;
		box-shadow: 0px 2px 5px lightgray;
		border-radius: 10%;
		float: left;
		margin-left: 23rpx;
		margin-right: 23rpx;
	}
	.dzbottom{
		width: 374rpx;
		height: 90rpx;
		/* background-color:#00f5ed; */
		background-color:#f0fcff;
		float: left;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.active {
	  background-color: #6ee7f0;
	}
</style>